<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册 - 电商助农平台</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <style>
        :root {
            --primary-color: #2ecc71;
            --secondary-color: #27ae60;
            --accent-color: #e67e22;
        }

        body {
            background: linear-gradient(135deg, #3498db, var(--primary-color));
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            overflow: hidden;
            background-size: 400% 400%;
            animation: gradientBG 14s ease infinite;
        }

        @keyframes gradientBG {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }

        .register-card {
            background: rgba(255, 255, 255, 0.98);
            border-radius: 20px;
            box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
            backdrop-filter: blur(10px);
            transform: translateY(0);
            transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1);
            width: 100%;
            max-width: 480px;
            overflow: hidden;
            position: relative;
        }

        .register-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
        }

        .form-control {
            border: 2px solid #e0e0e0;
            border-radius: 10px;
            padding: 14px 20px;
            font-size: 16px;
            transition: all 0.3s ease;
            background: rgba(255, 255, 255, 0.9);
        }

        .form-control:focus {
            border-color: var(--primary-color);
            box-shadow: 0 0 0 4px rgba(46, 204, 113, 0.2);
            background: white;
        }

        .input-group {
            position: relative;
            margin-bottom: 1.5rem;
        }

        .input-icon {
            position: absolute;
            left: 15px;
            top: 50%;
            transform: translateY(-50%);
            color: #95a5a6;
            transition: all 0.3s ease;
        }

        .form-control:focus + .input-icon {
            color: var(--primary-color);
            transform: translateY(-50%) scale(1.1);
        }

        .password-strength {
            height: 4px;
            background: #ecf0f1;
            border-radius: 2px;
            margin-top: 8px;
            overflow: hidden;
        }

        .strength-bar {
            height: 100%;
            width: 0;
            transition: all 0.4s ease;
        }

        .btn-primary {
            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
            border: none;
            border-radius: 10px;
            padding: 14px;
            font-size: 16px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 1px;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }

        .btn-primary:after {
            content: '';
            position: absolute;
            top: -180%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: rgba(255, 255, 255, 0.2);
            transform: rotate(45deg);
            transition: all 0.4s ease;
        }

        .btn-primary:hover:after {
            left: 100%;
        }

        .alert {
            border-radius: 10px;
            padding: 12px 20px;
            border: none;
        }

        .particles {
            position: absolute;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 1;
        }

        @media (max-width: 576px) {
            .register-card {
                margin: 20px;
                padding: 1.5rem;
            }
        }
    </style>
</head>
<body>
<canvas class="particles"></canvas>

<div class="register-card p-4 p-lg-5 mx-3">
    <div class="text-center mb-5">
        <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='64' height='64' fill='%232ecc71'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 14.5v-9l6 4.5-6 4.5z'/%3E%3C/svg%3E"
             alt="Logo" class="mb-3">
        <h2 class="fw-bold mb-2" style="color: #2c3e50;">加入助农大家庭</h2>
        <p class="text-muted">开启您的农产品电商之旅</p>
    </div>

    <% if (request.getAttribute("errorMessage") != null) { %>
    <div class="alert alert-danger alert-dismissible fade show" role="alert">
        <i class="fas fa-exclamation-circle me-2"></i>
        <%= request.getAttribute("errorMessage") %>
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    </div>
    <% } %>

    <form action="${pageContext.request.contextPath}/HelloServlet" method="post" class="needs-validation" novalidate>
        <input type="hidden" name="action" value="register">

        <div class="input-group">
            <input type="text" id="username" name="username" class="form-control ps-5" placeholder="用户名" required>
            <i class="fas fa-user input-icon"></i>
            <div class="valid-feedback">用户名可用</div>
            <div class="invalid-feedback">请输入有效的用户名</div>
        </div>

        <div class="input-group">
            <input type="email" id="email" name="email" class="form-control ps-5" placeholder="电子邮箱" required>
            <i class="fas fa-envelope input-icon"></i>
            <div class="invalid-feedback">请输入有效的邮箱地址</div>
        </div>

        <div class="input-group">
            <input type="tel" id="phone" name="phone" class="form-control ps-5" placeholder="联系电话" pattern="[0-9]{11}" required>
            <i class="fas fa-phone input-icon"></i>
            <div class="invalid-feedback">请输入11位手机号码</div>
        </div>

        <div class="input-group">
            <input type="password" id="password" name="password" class="form-control ps-5" placeholder="设置密码" required minlength="8">
            <i class="fas fa-lock input-icon"></i>
            <div class="invalid-feedback">• 至少8位字符 • 包含数字 • 建议混合大小写</div>
            <div class="password-strength mt-2">
                <div class="strength-bar"></div>
            </div>
<%--            <div class="password-tips text-muted mt-2 small">--%>
<%--                • 至少8位字符 • 包含数字 • 建议混合大小写--%>
<%--            </div>--%>
        </div>

        <div class="input-group">
            <input type="password" id="confirm-password" name="confirm-password" class="form-control ps-5" placeholder="确认密码" required>
            <i class="fas fa-redo input-icon"></i>
            <div class="invalid-feedback">两次输入的密码不一致</div>
        </div>

        <button type="submit" class="btn btn-primary w-100 mt-4">
            <i class="fas fa-user-plus me-2"></i>立即注册
        </button>

        <div class="text-center mt-4">
            <p class="text-muted mb-0">已有账号？
                <a href="login.jsp" class="text-decoration-none fw-bold" style="color: var(--secondary-color);">立即登录</a>
            </p>
        </div>
    </form>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<script>
    // 动态粒子背景
    const canvas = document.querySelector('.particles');
    const ctx = canvas.getContext('2d');
    let particles = [];

    function resizeCanvas() {
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
    }

    class Particle {
        constructor() {
            this.reset();
        }

        reset() {
            this.x = Math.random() * canvas.width;
            this.y = Math.random() * canvas.height;
            this.size = Math.random() * 2 + 1;
            this.speedX = Math.random() * 1 - 0.5;
            this.speedY = Math.random() * 1 - 0.5;
        }

        update() {
            this.x += this.speedX;
            this.y += this.speedY;

            if (this.x > canvas.width + 20 || this.x < -20 ||
                this.y > canvas.height + 20 || this.y < -20) {
                this.reset();
            }
        }

        draw() {
            ctx.fillStyle = 'rgba(255, 255, 255, 0.6)';
            ctx.beginPath();
            ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
            ctx.fill();
        }
    }

    function init() {
        resizeCanvas();
        particles = Array.from({ length: 80 }, () => new Particle());
    }

    function animate() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        particles.forEach(p => {
            p.update();
            p.draw();
        });
        requestAnimationFrame(animate);
    }

    window.addEventListener('resize', resizeCanvas);
    init();
    animate();

    // 表单验证逻辑
    (() => {
        'use strict'
        const forms = document.querySelectorAll('.needs-validation')
        Array.from(forms).forEach(form => {
            form.addEventListener('submit', event => {
                if (!form.checkValidity()) {
                    event.preventDefault()
                    event.stopPropagation()
                }
                form.classList.add('was-validated')
            }, false)
        })
    })()
</script>
</body>
</html>
